<!-- 商品列表 -->
<template>
  <div>
      <!-- 面包屑部分 -->
      <el-breadcrumb separator="/" class="header">
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
       </el-breadcrumb>
        <el-card >
        <!-- 添加商品提示 -->
       <el-alert  show-icon title="成功提示的文案" type="success"    center> </el-alert>

      <!-- 步骤栏 -->
      <el-steps :active="active" finish-status="success" class="steps" space="300px">
        <el-step title="基本信息"></el-step>
        <el-step title="商品列表"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
      </el-steps>
      <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
      
      <!-- tabs侧边栏 -->
      <el-form  ref="form" :model="form" label-width="80px" label-position="top" style="height:400px" >
      <el-tabs  tabPosition="left"  class="tabs"  style="height:400px" @tab-click="activeclick">
        <el-tab-pane label="商品信息">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>
           <el-form-item label="商品价格"  prop="goods_price" :rules="[
              { type: 'number', message: '输入数字'},
            ]">
            <el-input v-model="form.goods_price"></el-input>
          </el-form-item>
           <el-form-item label="商品重量" prop="goods_weight"
           :rules="[
              { type:'number', message: '输入数字'},
            ]">
            <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
           <el-form-item label="商品数量" prop="goods_number"
           :rules="[
              { type: 'number', message: '输入数字'},
            ]">
            <el-input v-model="form.goods_number"></el-input>
          </el-form-item>
           <el-form-item label="商品分类">
            <el-cascader
              v-model="value"
              :options="options"
              :props=" defaultprop"
              @change="handleChange"></el-cascader>
           </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品参数">
            <h1 v-if="!goodflag">请先完成商品信息</h1>
            <div v-else>
                <el-form-item :label="item.attr_name" v-for="item in manyarr" :key="item.attr_id">
                 <!--先用虚拟数据 -->
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
            </div>
        </el-tab-pane>
        <el-tab-pane label="商品属性">
            <el-form-item :label="item.attr_name" v-for="item in onlyarr" :key="item.attr_id">
                <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品图片">
           <el-form-item>
            <el-upload
                  class="upload-demo"
                  action="https://www.liulongbin.top:8888/api/private/v1/upload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handsuccess"
                  :file-list="fileList"
                  :headers="headers"
                  list-type="picture">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
             </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品内容">
          <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <quillEditor v-model="form.goods_introduce" ></quillEditor>
          </el-form-item>
        </el-tab-pane>
       </el-tabs>
      </el-form>
       </el-card>
  </div>
</template>

<script>
import { getcategories,getcategoriesmany,getcategoriesonly,addgoods} from "network/goodlist.js"

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from "vue-quill-editor"
export default {
 name:"goodlist",
 components: {
   quillEditor
 },
 data () {
   return {
        active: 0,
 //goods_name 	商品名称 	不能为空
// goods_cat 	以为','分割的分类列表 	不能为空
// goods_price 	价格 	不能为空
// goods_number 	数量 	不能为空
// goods_weight 	重量 	不能为空
// goods_introduce 	介绍 	可以为空
// pics 	上传的图片临时路径（对象） 	可以为空
// attrs 	商品的参数（数组） 	可以为空
        form:{
          goods_name:"",
          goods_cat:"",
          goods_price:"",
          goods_number:"",
          goods_weight:"",
          goods_introduce:"",
          pics:[],
          attrs:[]
        },
        options:[],
        value:[],
        // 页面展示的
        defaultprop:{
          label:"cat_name",
          value:"cat_id",
          children:"children",
          expandTrigger: 'hover'
        },
        //参数
        goodflag:false,
        manyarr:[],
        onlyarr:[],
        checkList:[],
        //图片上传
        fileList:[],
        //设置头部信息
        headers:{
          Authorization:localStorage.getItem("token")
        }
   }
 },
 created () {
    // 请求商品分类的数据
    getcategories().then(res=>{
       this.options=res.data.data
    })
 },
 methods: {
    activeclick() {
        if (this.active++ > 3) this.active = 0;
              if(this.value.length>2){
                  this.goodflag=true
              }else{
                this.$message.success("先完成第一步")
              }
      },

      // vlaue打印的就是选中的商品分类
      handleChange(value) {
          console.log(value);
          this.form.goods_cat=value.join(",")
          // 选择后发送网络请求
          if(value.length==3){
            //获取动态数据
              getcategoriesmany(value[2]).then(res=>{
                this.manyarr=res.data.data
                console.log(this.manyarr)
               
              })
            // 获取静态数据
             getcategoriesonly(value[2]).then(res=>{
                this.onlyarr=res.data.data
                
              })

            
          }
          },

          // 文件列表移除文件时的钩子
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          // 点击文件列表中已上传的文件时的钩子
          handlePreview(file) {
             console.log(file);
          },
          //上传成功后调用
          handsuccess(file){
                this.form.pics.push({"pic":file.data.tmp_path})
          },

          //发送添加商品的网络请求
          onSubmit(){
                let arr1=this.manyarr.map(item=>{
                   return {"attr_id":item.attr_id,attr_value:item.attr_value}
                })
                let arr2=this.onlyarr.map(item=>{
                   return {"attr_id":item.attr_id,attr_value:item.attr_value}
                })
                // //把动态数据和静态数据传入form.attrs中
                 this.form.attrs=[...arr1,...arr2]
                 //发送添加商品的网络请求
                 addgoods(this.form).then(res=>{
                    console.log(res)
                    if(res.data.meta==201){
                        this.$message.success("创建商品成功")
                    }
                 })
                 this.$router.push("/goodHome")
          },
      }
}

</script>
<style scoped>
.header{
  margin-bottom: 20px;
}
.steps{
  margin-left: 100px;
  margin-top: 15px;
}
.tabs{
    margin-top: 20px;
    overflow: auto;
}
</style>